<template>
  <div class="server-page">
    <ul class="server-list">
      <li
        v-for="item in arr"
        :key="item.id"
        :class="{ active: id === item.id }"
        @click="handleClickLi(item.id)"
      >
        <img :src="item.url" class="head-img" />
        {{ item.name }}
      </li>
    </ul>
    <CustomerPage :id="id" :key="id" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import CustomerPage from "./customerpage.vue";

const id = ref("514222");

const arr = ref([
  {
    id: "514222",
    name: "张三",
    url: "https://img2.baidu.com/it/u=1001860741,127553111&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1730221200&t=0e6d25eaf18ec1e540ae55ca98afc0c5",
  },
  {
    id: "2",
    name: "李四",
    url: "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
  },
  {
    id: "3",
    name: "王二",
    url: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
  },
]);

const handleClickLi = (item) => {
  id.value = item;
};
</script>
<style scoped lang="scss">
.server-page {
  display: flex;
}

.server-list {
  width: 100px;
  margin-right: 10px;
  // border: 1px solid #ccc;

  li {
    display: flex;
    height: 40px;
    align-items: center;
    border-bottom: 1px solid #ccc;

    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 8px;
    }
  }

  li.active {
    color: red;
    border-right: 2px solid red;
  }
}
</style>